<template>
  <el-dialog
    :title="dialist.isAdd ? '添加管理员' : '编辑管理员'"
    :visible.sync="dialist.isShow"
    center
    :before-close="cancle"
  >
    <el-form :model="list" ref="diaform" :rules="rules">
      <el-form-item label="所属角色名称" :label-width="formLabelWidth" prop="roleid">
        <el-select v-model="list.roleid" placeholder="请选择">
          <el-option :label="item.rolename" :value="item.id" v-for="item in roleOption" :key="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="用户名称" :label-width="formLabelWidth" prop="username">
          <el-input placeholder="请输入用户名称" v-model="list.username" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="密码" :label-width="formLabelWidth" prop="password">
        <el-input autocomplete="off" placeholder="请输入用户密码" v-model="list.password"></el-input>
        <i v-if="istag">密码留空代表不修改</i>
      </el-form-item>
      <el-form-item label="状态" :label-width="formLabelWidth">
        <el-switch
          v-model="list.status"
          :active-value="1"
          :inactive-value="2"
        ></el-switch>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="cancle">取 消</el-button>
      <el-button type="primary" v-if="dialist.isAdd" @click="add"
        >添 加</el-button
      >
      <el-button type="primary" v-else @click="edit">编 辑</el-button>
    </div>
  </el-dialog>
</template>

<script>
import {
  addUser,
  getUserOne,
  editUser,
  getRole,
} from "../../util/axios";
export default {
  data() {
    return {
      list: {
        roleid: "",
        username: "",
        password: "",
        status: 1,
      },
      formLabelWidth: "120px",
      defaultProps: {
        children: "children",
        label: "title",
      },
      rules: {
        username: [
          { required: true, message: "请输入管理员名称", trigger: "blur" },
          { min: 2, max: 8, message: "长度在 2 到 8 个字符", trigger: "blur" },
        ],
        roleid:[
             { required: true, message: "请选择所属角色", trigger: "blur" },
        ],
        //  password:[
        //     { required: true, message: '请输入密码', trigger: 'blur' },
        //     { min: 2, max: 8, message: '长度在 2 到 8 个字符', trigger: 'blur' }
        //     ],
      },
      //下拉框的内容
      roleOption: [],
      //控制修改密码的提示
      istag:false,

    };
  },
  props: ["dialist"],
  methods: {
    //点击取消后隐藏dialog
    cancle() {
      //隐藏dialog
      this.$emit("cancle", false);
      //清空表格
      this.list = {
        roleid: "",
        username: "",
        password: "",
        status: 1,
      };
      //清空验证
      this.$refs.diaform.resetFields();
      //清空编辑密码提示
      this.istag = false;
    },
    //添加功能
    add() {
      this.$refs.diaform.validate((val) => {
        if (val) {
          addUser(this.list)
            .then((res) => {
              if (res.code == 200) {
                // this.$router.push("/user");
                this.$message.success(res.msg);
                this.$emit("rolad");
                this.cancle();
                // location.reload()
              } else {
                this.$message.error(res.msg);
              }
            })
            .catch((err) => {
              this.$message.error(err.msg);
            });
        }
      });
    },
    //dialog的编辑
    edit() {
      this.$refs.diaform.validate((val) => {
        if (val) {
          editUser(this.list)
            .then((res) => {
              if (res.code == 200) {
                // this.$router.push("/role");
                this.$message.success(res.msg);
                this.$emit("rolad");
                this.cancle();
              } else {
                this.$message.error(res.msg);
              }
            })
            .catch((err) => {
              this.$message.error(err.msg);
            });
        }
      });
    },
    lookup(uid) {
      getUserOne({ uid }).then((res) => {
        if (res.code == 200) {
          this.list = res.list;
          this.list.uid = uid;
          this.list.password ="";
          this.istag = true;
        }
      });
    },
  },
  mounted() {
    //页面挂载后循环数据
    getRole().then((res) => {
      if (res.code == 200) {
        this.roleOption = res.list;
      } else {
        this.$message.error(res.msg);
      }
    });
  },
};
</script>

<style lang="stylus" scoped></style>